<script setup lang="ts">
import {onBeforeMount, ref} from 'vue';
import {AppstoreOutlined, TagOutlined, FolderOutlined} from '@ant-design/icons-vue'
import SortLeft from "@/components/sort/sortLeft/index.vue"
import SortLeftByTag from "@/components/sort/sortLeft/tag.vue"
import SortLeftByMonth from "@/components/sort/sortLeft/month.vue"
import SortRight from "@/components/sort/sortRight/index.vue"
import {getArticleByBlogSortUid, getArticleByMonth, getBlogSortList, getSortList} from "@/api/sort/sort";
import {commonConsoleLog, ECode} from "@/util/commonUtil";
import {getArticleByTagUid, getTagList} from "@/api/tag/tag";
import {recorderBehavior} from "@/api/system/system";

const activeKey = ref<string>('1');
const activitiesList = ref<any>([])
const selectBlogUid = ref<any>('')
const selectContent = ref<any>('')
const itemByDate = ref<any>([])
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const reverse = ref<boolean>(false)

onBeforeMount(() => {
  blogSortList()
  // 3S后埋点信息上报
  setTimeout(() => {
    recorderBehavior({'otherData': '归档', 'behavior': 'VISIT_PAGE'}).then((response: any) => {
      if (response.code == ECode.SUCCESS) {
        commonConsoleLog('归档页信息上报成功')
      }
    })
  }, 3000)
})

function handleClick(tab: any) {
  switch (tab) {
    case '1':
      currentPage.value = 1;
      blogSortList();
      break;
    case '2':
      currentPage.value = 1;
      tagList();
      break;
    case '3':
      reverse.value = true;
      currentPage.value = 1;
      sortList();
      break;
  }
}

async function blogSortList() {
  await getBlogSortList().then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let activities = response.data;
      let result = [];
      for (let a = 0; a < activities.length; a++) {
        let dataForDate = {
          sortName: activities[a].sortName,
          uid: activities[a].uid
        };
        result.push(dataForDate);
      }
      activitiesList.value = result;
      // 默认选择第一个
      getBlogList(activities[0].uid);
    }
  });
}

async function getBlogList(blogSortUid: any) {
  selectBlogUid.value = blogSortUid;
  let params = new URLSearchParams();
  params.append("blogSortUid", blogSortUid);
  await getArticleByBlogSortUid(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      itemByDate.value = response.data.records;
      currentPage.value = response.data.current;
      pageSize.value = response.data.size;
    }
  })
}

function selectItem(item: any) {
  getBlogList(item)
}

function selectItemByTag(item: any) {
  getBlogTagList(item)
}

function selectItemByMonth(item: any) {
  clickTime(item)
}

async function tagList() {
  await getTagList().then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let activities = response.data;
      let result = [];
      for (let a = 0; a < activities.length; a++) {
        let dataForDate = {
          tagName: activities[a].content,
          uid: activities[a].uid
        };
        result.push(dataForDate);
      }
      activitiesList.value = result;
      // 默认选择第一个
      getBlogTagList(activities[0].uid);
    }
  })
}

async function getBlogTagList(tagUid: any) {
  selectBlogUid.value = tagUid;
  let params = new URLSearchParams();
  params.append("tagUid", tagUid);
  await getArticleByTagUid(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      itemByDate.value = response.data.records;
      currentPage.value = response.data.current;
      pageSize.value = response.data.size;
    }
  })
}

async function sortList() {
  getSortList().then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let activities = response.data;
      let result = [];
      for (let a = 0; a < activities.length; a++) {
        let temp = activities[a].replace("年", "-").replace("月", "-") + "1";
        let dataForDate = {content: activities[a], timestamp: temp};
        result.push(dataForDate);
      }
      activitiesList.value = result;
      // 默认选择最后一个
      clickTime(activities[activities.length - 1]);
    }
  })
}

async function clickTime(content: any) {
  selectContent.value = content;
  let params = new URLSearchParams();
  params.append("monthDate", content);
  await getArticleByMonth(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      itemByDate.value = response.data;
    }
  })
}
</script>

<template>
  <section class="sortPage max-w-screen-lg m-auto mt-8 w-full rounded-xl mb-12">
    <a-tabs v-model:activeKey="activeKey" @change="handleClick">
      <a-tab-pane key="1">
        <template #tab>
          <AppstoreOutlined/>
          <span>分类</span>
        </template>
        <a-row :gutter="[16,16]" class="mt-4 justify-between">
          <a-col :span="4">
            <SortLeft :timeList="activitiesList" @clickLeftCallback="selectItem"/>
          </a-col>
          <a-col :span="20">
            <SortRight :postList="itemByDate"/>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          <TagOutlined/>
          <span>标签</span>
        </template>
        <a-row :gutter="[16,16]" class="mt-4 justify-between">
          <a-col :span="4">
            <SortLeftByTag :timeList="activitiesList" @clickLeftByTagCallback="selectItemByTag"/>
          </a-col>
          <a-col :span="20">
            <SortRight :postList="itemByDate"/>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #tab>
          <FolderOutlined/>
          <span>归档</span>
        </template>
        <a-row :gutter="[16,16]" class="mt-4 justify-between">
          <a-col :span="4">
            <SortLeftByMonth :timeList="activitiesList" :reverse="reverse"
                             @clickLeftByMonthCallback="selectItemByMonth"/>
          </a-col>
          <a-col :span="20">
            <SortRight :postList="itemByDate"/>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </section>
</template>

<style scoped lang="less">
:deep(.ant-tabs-tab-btn .anticon) {
  margin-right: 0;
}
</style>
